<script setup>
import { useCategoryStore } from '@/stores/category';
const categoryStore=useCategoryStore()
</script>
<!-- 组件模板 -->
<template>
  <!-- 首页分类容器 -->
  <div class="home-category">
    <!-- 菜单列表 -->
    <ul class="menu">
      <!-- 通过v-for循环生成9个li元素，用于显示菜单项 -->
      <li v-for="item in categoryStore.categoryList" :key="item.id">
        <!-- 第一个链接，指向居家页面 -->
        <RouterLink to="/">{{item.name}}</RouterLink>
        <!-- 这里可能有逻辑上的问题，通常不会在单个li内再次使用v-for生成多个RouterLink -->
        <!-- 如果目的是显示两个相同的链接，应该考虑使用不同的方式 -->
        <RouterLink v-for="i in item.children.slice(0,2)" :key="i" to="/">{{ i.name }}</RouterLink>

        <!-- 弹层，用于显示分类推荐 -->
        <!-- 弹层layer位置 -->
        <div class="layer">
          <!-- 标题和副标题 -->
          <h4>分类推荐<small>根据您的购买或浏览记录推荐</small></h4>
          <!-- 商品列表 -->
          <ul>
            <!-- 循环生成5个商品推荐项 -->
            <li v-for="i in item.goods" :key="i.id">
              <RouterLink to="/">
                <!-- 商品图片占位符 -->
                <img :src="i.picture"alt=""/>
                <!-- 商品信息 -->
                <div class="info">
                  <p class="name ellipsis-2">{{ i.name }}</p>
                  <p class="desc ellipsis">{{ i.dese }}</p>
                  <p class="price"><i>¥</i>{{ i.price }}</p>
                </div>
              </RouterLink>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>
  <style scoped lang="scss">
  .home-category {
    width: 250px;
    height: 500px;
    background: rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 99;

    .menu {
      li {
        padding-left: 40px;
        height: 55px;
        line-height: 55px;

        &:hover {
          background: $xtxColor;
        }

        a {
          margin-right: 4px;
          color: #fff;

          &:first-child {
            font-size: 16px;
          }
        }

        .layer {
          width: 990px;
          height: 500px;
          background: rgba(255, 255, 255, 0.8);
          position: absolute;
          left: 250px;
          top: 0;
          display: none;
          padding: 0 15px;

          h4 {
            font-size: 20px;
            font-weight: normal;
            line-height: 80px;

            small {
              font-size: 16px;
              color: #666;
            }
          }

          ul {
            display: flex;
            flex-wrap: wrap;

            li {
              width: 310px;
              height: 120px;
              margin-right: 15px;
              margin-bottom: 15px;
              border: 1px solid #eee;
              border-radius: 4px;
              background: #fff;

              &:nth-child(3n) {
                margin-right: 0;
              }

              a {
                display: flex;
                width: 100%;
                height: 100%;
                align-items: center;
                padding: 10px;

                &:hover {
                  background: #e3f9f4;
                }

                img {
                  width: 95px;
                  height: 95px;
                }

                .info {
                  padding-left: 10px;
                  line-height: 24px;
                  overflow: hidden;

                  .name {
                    font-size: 16px;
                    color: #666;
                  }

                  .desc {
                    color: #999;
                  }

                  .price {
                    font-size: 22px;
                    color: $priceColor;

                    i {
                      font-size: 16px;
                    }
                  }
                }
              }
            }
          }
        }

        // 关键样式  hover状态下的layer盒子变成block
        &:hover {
          .layer {
            display: block;
          }
        }
      }
    }
  }

  </style>
